<template>
  <div class="papers">
    <div class="search-section">
      <label for="paperName">文件名称:</label>
      <input class="input-field" v-model="paperName" id="paperName" @keyup.enter="sendPaperName" />
      <button class="submit-btn" @click="sendPaperName">提交</button>
    </div>

    <div v-if="records && records.length" class="pagination-section">
      <table class="narrow-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>下载时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in records" :key="record.id">
            <td>{{ record.id }}</td>
            <td>{{ record.accessTime }}</td>
          </tr>
        </tbody>
      </table>
      <v-pagination v-model="page" :length="totalPages"></v-pagination>
    </div>
    <div v-if="error" class="error-section">
      {{ error }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paperName: '',
      records: [],
      page: 1,
      totalPages: 0,
      error: ''
    };
  },
 methods: {
    async sendPaperName() {
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          throw new Error('无法找到token');
        }

        const response = await this.$axios.post('http://192.168.124.128:8081/api/record', {
          paperName: this.paperName,
          page: this.page
        }, {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        if (response.data.error) {
          alert(response.data.error);
        } else if (response.data && response.data.records) {
          this.records = response.data.records;
          this.totalPages = response.data.totalPages;
          this.error = '';
        } else {
          this.error = '发生未知错误';
        }
      } catch (error) {
        if (error.response && error.response.data && error.response.data.error) {
          alert(error.response.data.error); 
        } else {
          console.error("Error sending paper name:", error);
          alert('请求失败: ' + (error.message || '未知错误'));
        }
      }
    }
  },
  watch: {
    page() {
      this.sendPaperName();
    }
  }
}
</script>
<style lang="less" scoped>
.search-section, .pagination-section, .error-section {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.papers {
  background-color: #f4f4f4;
  padding: 40px;
}

.search-section, .pagination-section {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px; 
  background-color: white;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15); 
}

.search-section label {
  margin-right: 10px;
  font-weight: 500;
}

.input-field {
  width: 70%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-right: 20px;
  flex: none; 
}

.submit-btn {
  background-color: #007BFF;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #0056b3;
}

.pagination-section {
  margin-top: 20px;
  font-size: 0.9rem;
  padding: 15px;
  background-color: white; 
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15); 
}

table {
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

table,th,td {
  border: 1px solid #ccc;
}

th,td {
  padding: 6px 10px;
  text-align: left;
}
.narrow-table {
  width: 100%;
}
.error-section {
  margin-top: 20px;
  font-size: 0.9rem;
  color: red;
}

</style>
